<template>
  <view class="page">
    <!-- 导航栏 -->
    <tui-navigation-bar title="我的存酒"></tui-navigation-bar>

    <tui-tab
      :tabs="tabs"
      :current="currentTab"
      :color="$variables.primaryGreyText"
      :selectedColor="$variables.gold"
      :sliderBgColor="$variables.gold"
      backgroundColor="transparent"
      @change="tabsChange"
    ></tui-tab>

    <swiper
      class="swiper"
      :current="currentTab"
      @change="swiperChange"
      :style="{
        height: swiperHeight
      }"
    >
      <!-- 全部 -->
      <swiper-item class="swiper-item">
        <my-container :data="wineList" refresh @refresh="getKeepWine">
          <!-- @click="$format(card, 'isget') === isGetDict['未取'] ? getWine(card.id) : ''" -->
          <section class="wine-list" v-for="card in wineList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.getroom" class="right">{{ card.getroom }}</view>
            </view>
            <view class="content">
              <view class="is-flex-col width-100 pl-5 pr-5">
                <my-row :title="card.goodsname" padding="3px 0">
                  <span slot="value" class="is-flex">
                    <view class="pr-20">{{ card.Unit }}</view>
                    <view>x{{ card.number }}</view>
                  </span>
                </my-row>
                <my-row title="存酒房号" :value="card.saveroom" padding="3px 0"></my-row>
                <my-row title="存酒时间" :value="card.addtime" padding="3px 0"></my-row>
                <my-row title="过期时间" :value="card.endtime" padding="3px 0"></my-row>
              </view>
            </view>
            <!-- 取酒 / 已取 -->
            <view class="foot" @tap="openGetWine(card)">
              <view :class="card.expired === expiredDict['已过期'] ? 'disabled-btn' : card.isget === isGetDict['未取'] ? 'gold-btn' : 'disabled-btn'">
                {{ card.isget | isgetType }}
              </view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-expired" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>

      <!-- 可取 -->
      <swiper-item class="swiper-item">
        <my-container :data="noGetWineList" refresh @refresh="getKeepWine">
          <!-- @click="$format(card, 'isget') === isGetDict['未取'] ? getWine(card.id) : ''" -->
          <section class="wine-list" v-for="card in noGetWineList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.getroom" class="right">{{ card.getroom }}</view>
            </view>
            <view class="content">
              <view class="is-flex-col width-100 pl-5 pr-5">
                <my-row :title="card.goodsname" padding="3px 0">
                  <span slot="value" class="is-flex">
                    <view class="pr-20">{{ card.Unit }}</view>
                    <view>x{{ card.number }}</view>
                  </span>
                </my-row>
                <my-row title="存酒房号" :value="card.saveroom" padding="3px 0"></my-row>
                <my-row title="存酒时间" :value="card.addtime" padding="3px 0"></my-row>
                <my-row title="过期时间" :value="card.endtime" padding="3px 0"></my-row>
              </view>
            </view>
            <!-- 取酒 / 已取 -->
            <view class="foot" @click="openGetWine(card)">
              <view :class="card.expired === expiredDict['已过期'] ? 'disabled-btn' : card.isget === isGetDict['未取'] ? 'gold-btn' : 'disabled-btn'">
                {{ card.isget | isgetType }}
              </view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-expired" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>

      <!-- 已取 -->
      <swiper-item class="swiper-item">
        <my-container :data="isGetWineList" refresh @refresh="getKeepWine">
          <!-- @click="$format(card, 'isget') === isGetDict['未取'] ? getWine(card.id) : ''" -->
          <section class="wine-list" v-for="card in isGetWineList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.getroom" class="right">{{ card.getroom }}</view>
            </view>
            <view class="content">
              <view class="is-flex-col width-100 pl-5 pr-5">
                <my-row :title="card.goodsname" padding="3px 0">
                  <span slot="value" class="is-flex">
                    <view class="pr-20">{{ card.Unit }}</view>
                    <view>x{{ card.number }}</view>
                  </span>
                </my-row>
                <my-row title="存酒房号" :value="card.saveroom" padding="3px 0"></my-row>
                <my-row title="存酒时间" :value="card.addtime" padding="3px 0"></my-row>
                <my-row title="过期时间" :value="card.endtime" padding="3px 0"></my-row>
              </view>
            </view>
            <!-- 取酒 / 已取 -->
            <view class="foot" @click="openGetWine(card)">
              <view :class="card.expired === expiredDict['已过期'] ? 'disabled-btn' : card.isget === isGetDict['未取'] ? 'gold-btn' : 'disabled-btn'">
                {{ card.isget | isgetType }}
              </view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-expired" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>

      <!-- 已过期 -->
      <swiper-item class="swiper-item">
        <my-container :data="expiredWineList" refresh @refresh="getKeepWine">
          <!-- @click="$format(card, 'isget') === isGetDict['未取'] ? getWine(card.id) : ''" -->
          <section class="wine-list" v-for="card in expiredWineList" :key="card.id">
            <view class="header">
              <view class="left">{{ card.bname }}</view>
              <view v-if="card.getroom" class="right">{{ card.getroom }}</view>
            </view>
            <view class="content">
              <view class="is-flex-col width-100 pl-5 pr-5">
                <my-row :title="card.goodsname" padding="3px 0">
                  <span slot="value" class="is-flex">
                    <view class="pr-20">{{ card.Unit }}</view>
                    <view>x{{ card.number }}</view>
                  </span>
                </my-row>
                <my-row title="存酒房号" :value="card.saveroom" padding="3px 0"></my-row>
                <my-row title="存酒时间" :value="card.addtime" padding="3px 0"></my-row>
                <my-row title="过期时间" :value="card.endtime" padding="3px 0"></my-row>
              </view>
            </view>
            <!-- 取酒 / 已取 -->
            <view class="foot" @tap.self="openGetWine(card)">
              <view :class="card.expired === expiredDict['已过期'] ? 'disabled-btn' : card.isget === isGetDict['未取'] ? 'gold-btn' : 'disabled-btn'">
                {{ card.isget | isgetType }}
              </view>
            </view>

            <!-- 已过期图标 -->
            <my-icon v-if="card.expired === expiredDict['已过期']" name="expire" class="is-expired" color="#878a98" size="55"></my-icon>
          </section>
        </my-container>
      </swiper-item>
    </swiper>

    <modal-scan ref="scanModal" :button="[{ text: '确定取酒', type: 'gold', plain: false }]" @clickBtn="handleGetWine"></modal-scan>
  </view>
</template>

<script>
export default {
  data() {
    return {
      /* css 一些变量值 */
      tabsHeight: '80rpx',
      /* css 一些变量值 */

      $variables: this.$variables,
      tabs: ['全部', '可取', '已取', '已过期'],
      isGetDict: { 未取: 1, 已取酒: 2 },
      expiredDict: { 未过期: 0, 已过期: 1 },
      currentTab: 0,
      wine: null, // 点击选中的 wine
      wineList: null
    }
  },
  filters: {
    // "isget" - 是否已取（1 否 2 是）
    isgetType(val) {
      return val === 1 ? '取酒' : '已取'
    }
  },
  computed: {
    swiperHeight() {
      return `calc(100vh - ${this.navBarHeight} - ${this.tabsHeight});`
    },
    noGetWineList() {
      const wineList = this.wineList
      if (!wineList) return null

      return wineList.filter(item => {
        return item.expired === this.expiredDict['未过期'] && item.isget === this.isGetDict['未取']
      })
    },
    isGetWineList() {
      const wineList = this.wineList
      if (!wineList) return null
      return wineList.filter(item => {
        return item.isget === this.isGetDict['已取酒']
      })
    },
    // "expired": 1 > 是否过期（ 0:否, 1:是 ）
    expiredWineList() {
      const wineList = this.wineList
      if (!wineList) return null
      return wineList.filter(item => {
        return item.expired === this.expiredDict['已过期']
      })
    }
  },
  onLoad() {},
  onShow() {
    this.getKeepWine()
  },
  methods: {
    openGetWine(wine) {
      const isget = this.$format(wine, 'isget')
      const expired = this.$format(wine, 'expired')
      if (isget !== this.isGetDict['未取'] || expired !== this.expiredDict['未过期']) return
      this.wine = wine

      this.getWineOptions(wine).then(res => {
        this.$refs.scanModal.open({ showType: this.$format(res, 'wxappgetwinetype'), bid: this.wine.bid, ifByClickBtnUploadRoom: true })
      })
    },
    // 查询取酒获取房号配置
    getWineOptions(wine) {
      return new Promise((resolve, reject) => {
        const bid = this.$format(wine, 'bid')
        if (!bid) return this.$msg('text', 'bid 为空')
        const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
        if (!baseParam) return reject()
        Object.assign(baseParam, { bid })
        console.param('查询取酒获取房号配置', baseParam)
        this.$api
          .getWineOptions(baseParam)
          .then(res => {
            console.res('查询取酒获取房号配置', res)
            resolve(this.$format(res, 'data'))
          })
          .catch(err => {
            console.err('查询取酒获取房号配置', err)
            this.errMsg(err, '查询取酒获取房号配置失败')
            reject(err)
          })
      })
    },

    tabsChange(param) {
      this.currentTab = param.index
    },
    swiperChange(param) {
      this.currentTab = param.detail.current
    },
    /**
     * 查询我的存酒列表
     */
    getKeepWine() {
      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return

      console.param('查询我的存酒列表', baseParam)
      this.$api
        .getKeepWine(baseParam)
        .then(res => {
          console.res('查询我的存酒列表', res)
          this.wineList = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('查询我的存酒列表', err)
          this.errMsg(err, '查询我的存酒列表失败')
        })
    },

    handleGetWine(currentRoom) {
      const roomid = this.$format(currentRoom, 'roomid')
      const id = this.$format(this.wine, 'id')
      this.getWine(id, roomid)
    },

    /**
     * 会员小程序取酒
     */
    getWine(id, roomid) {
      console.log('getWine')

      if (!id) return this.$msg('text', 'id为空')
      if (!roomid) return this.$msg('text', '请先选择房台')

      const baseParam = this.getBase(['token', 'usertoken', 'selectuniacid'])
      if (!baseParam) return
      Object.assign(baseParam, { id, roomid })
      console.param('会员小程序取酒', baseParam)
      this.$api
        .getWine(baseParam)
        .then(res => {
          console.res('会员小程序取酒', res)
          this.$msg('text', '取酒成功')
          this.getKeepWine() // 刷新数据
          this.$refs.scanModal.close()
        })
        .catch(err => {
          console.err('会员小程序取酒', err)
          this.errMsg(err, '取酒失败')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$tabsHeight: 80rpx;
$normalNavBarHeight: 64px;
.swiper {
  height: calc(100vh - #{$tabsHeight} - #{$normalNavBarHeight});
  .swiper-item {
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
    overflow: auto;
    .wine-list {
      position: relative;
      background: #333952;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.4);
      margin-bottom: 15px;

      .header {
        @include is-flex(row, space-between, center, nowrap);
        @include border-bottom;
        padding: 10px 15px;
        font-size: $font-size-xs;
        .left {
          color: $color-primary-grey-text;
        }
        .right {
          color: $color-primary-grey-text;
        }
      }
      .content {
        @include is-flex(row, space-between, center, nowrap);
        padding: 12px 10px;
        font-size: $font-size-xs;
        ::v-deep .row {
          .title {
            color: $color-primary-grey-text;
          }
        }
        .time {
          color: $color-primary-grey-text;
          padding: 2px 0;
        }
        .price {
          color: $gold;
        }
      }
      .foot {
        padding: 0 15px;
        color: $gold;
        font-size: $font-size-xs;
        min-height: 40px;
        background: #292f45;

        @include is-flex(row, flex-end, center, nowrap);
        .gold-btn {
          font-size: $font-size-xs;
          padding: 3px 10px;
          border-radius: 10px;
        }
        .disabled-btn {
          font-size: $font-size-xs;
          padding: 3px 10px;
          border-radius: 10px;
          background: #868a99;
          color: #131828;
        }
      }
      .is-used {
        position: absolute;
        right: 10px;
        bottom: 10px;
      }
      .is-expired {
        position: absolute;
        bottom: 35%;
        left: 30%;
      }
    }
  }
}
</style>
